import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import '../models/airplane_model.dart';
import 'control_mode_selection_screen.dart';

class ModelSelectionScreen extends StatelessWidget {
  const ModelSelectionScreen({super.key});

  @override
  Widget build(BuildContext context) {
    // 设置全屏模式和隐藏状态栏
    SystemChrome.setEnabledSystemUIMode(
      SystemUiMode.immersiveSticky,
      overlays: [],
    );

    // 强制横屏
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.landscapeLeft,
      DeviceOrientation.landscapeRight,
    ]);

    // 获取屏幕尺寸
    final screenSize = MediaQuery.of(context).size;
    // 计算每个卡片的宽度：屏幕宽度的22%，确保一屏能显示3-4个卡片（考虑间距）
    final cardWidth = screenSize.width * 0.22;
    // 计算卡片间距：卡片宽度的三分之一
    final cardSpacing = cardWidth / 3;
    // 计算卡片高度：屏幕高度的50%
    final cardHeight = screenSize.height * 0.6;
    // 计算图片区域高度：卡片高度的60%
    final imageHeight = cardHeight * 0.4;
    // 计算上下边距：剩余空间平均分配
    final verticalPadding = (screenSize.height - cardHeight) / 2;

    return Scaffold(
      extendBodyBehindAppBar: true,
      appBar: AppBar(backgroundColor: Colors.transparent, elevation: 0),
      body: Column(
        children: [
          Expanded(
            child: ListView.builder(
              scrollDirection: Axis.horizontal,
              padding: EdgeInsets.symmetric(
                horizontal: screenSize.width * 0.05, // 增加两侧边距
                vertical: verticalPadding,
              ),
              itemCount: AirplaneModel.models.length,
              itemBuilder: (context, index) {
                final model = AirplaneModel.models[index];
                return Padding(
                  padding: EdgeInsets.symmetric(
                    horizontal: cardSpacing / 2, // 使用一半的间距，因为每个卡片两侧都有padding
                  ),
                  child: SizedBox(
                    width: cardWidth,
                    height: cardHeight,
                    child: Card(
                      elevation: 4,
                      clipBehavior: Clip.antiAlias,
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(16.0),
                      ),
                      child: InkWell(
                        onTap: () {
                          Navigator.push(
                            context,
                            MaterialPageRoute(
                              builder:
                                  (context) =>
                                      ControlModeSelectionScreen(model: model),
                            ),
                          );
                        },
                        child: Column(
                          children: [
                            SizedBox(
                              height: imageHeight,
                              child: Stack(
                                fit: StackFit.expand,
                                children: [
                                  Container(
                                    decoration: BoxDecoration(
                                      gradient: LinearGradient(
                                        begin: Alignment.topLeft,
                                        end: Alignment.bottomRight,
                                        colors: [
                                          Theme.of(context).colorScheme.primary,
                                          Theme.of(
                                            context,
                                          ).colorScheme.secondary,
                                        ],
                                      ),
                                    ),
                                  ),
                                  Icon(
                                    Icons.airplanemode_active,
                                    size: imageHeight * 0.5,
                                    color: Colors.white.withOpacity(0.8),
                                  ),
                                ],
                              ),
                            ),
                            Expanded(
                              child: Padding(
                                padding: const EdgeInsets.all(12.0),
                                child: Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    Text(
                                      model.name,
                                      style: Theme.of(
                                        context,
                                      ).textTheme.titleMedium?.copyWith(
                                        fontWeight: FontWeight.bold,
                                        fontSize: cardWidth * 0.1,
                                      ),
                                      maxLines: 2,
                                      overflow: TextOverflow.ellipsis,
                                    ),
                                    const SizedBox(height: 4),
                                    Container(
                                      padding: const EdgeInsets.symmetric(
                                        horizontal: 6.0,
                                        vertical: 2.0,
                                      ),
                                      decoration: BoxDecoration(
                                        color:
                                            Theme.of(
                                              context,
                                            ).colorScheme.primaryContainer,
                                        borderRadius: BorderRadius.circular(
                                          4.0,
                                        ),
                                      ),
                                      child: Text(
                                        model.category,
                                        style: Theme.of(
                                          context,
                                        ).textTheme.bodySmall?.copyWith(
                                          color:
                                              Theme.of(
                                                context,
                                              ).colorScheme.onPrimaryContainer,
                                          fontSize: cardWidth * 0.06,
                                        ),
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                            ),
                          ],
                        ),
                      ),
                    ),
                  ),
                );
              },
            ),
          ),
          // 页面指示器
          Padding(
            padding: EdgeInsets.symmetric(vertical: verticalPadding * 0.2),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: List.generate(
                AirplaneModel.models.length,
                (index) => Container(
                  width: screenSize.width * 0.01,
                  height: screenSize.width * 0.01,
                  margin: const EdgeInsets.symmetric(horizontal: 4),
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    color: Theme.of(
                      context,
                    ).colorScheme.primary.withOpacity(0.3),
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

  // Widget _buildFeatureItem(BuildContext context, String feature, double cardWidth) {
  //   return Padding(
  //     padding: const EdgeInsets.only(bottom: 4.0),
  //     child: Row(
  //       crossAxisAlignment: CrossAxisAlignment.start,
  //       children: [
  //         Icon(
  //           Icons.check_circle_outline,
  //           size: cardWidth * 0.06,
  //           color: Theme.of(context).colorScheme.primary,
  //         ),
  //         const SizedBox(width: 4),
  //         Expanded(
  //           child: Text(
  //             feature,
  //             style: Theme.of(context).textTheme.bodySmall?.copyWith(
  //               fontSize: cardWidth * 0.05,
  //             ),
  //             maxLines: 1,
  //             overflow: TextOverflow.ellipsis,
  //           ),
  //         ),
  //       ],
  //     ),
  //   );
  // }
}
